<template>
  <div v-if="!Object.keys(curUser).length" class="bind_new_user">
    <el-tabs type="border-card" stretch class="box-limit">
      <el-tab-pane label="注册新用户">
        <new-user-form />
      </el-tab-pane>
      <el-tab-pane label="绑定已有账号">
        <bind-existing-user-form />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import NewUserForm from './components/new_user_form';
import BindExistingUserForm from './components/bind_existing_user_form';

export default {
  name: 'bind_new_user', // 未绑定用户
  components: { NewUserForm, BindExistingUserForm },
  computed: {
    ...mapState({ curUser: 'currentUser' }),
  },
  created() {
    if (Object.keys(this.curUser).length) this.directBindCurrentUser();
  },
  methods: {
    // 当前用户已登录，直接绑定
    directBindCurrentUser() {
      this.$api.oauth.update({
        openId: this.$route.query.open_id,
        type: this.$route.query.type,
      }).then(() => {
        this.$message.success('绑定成功');
        const redirect = localStorage.getItem('otherSignIn');
        localStorage.removeItem('otherSignIn');
        this.$router.push(redirect || '/');
      }).catch(() => {});
    },
  },
};
</script>

<style lang="scss">
@import '~@/assets/scss/values.scss';

.bind_new_user {
  position: fixed; // 定位占满整个页面
  top: 0; right: 0; bottom: 0; left: 0;
  background-image: url('../../../assets/images/sign_in/background.jpg'); // 相对于这个文件的路径
  background-size: 100% 100%; // 背景图片拉伸铺满

  .box-limit {
    max-width: 23.125rem;
    margin-left: auto;
    margin-right: auto;
  }

  @media screen and (min-width: $sm) {
    .box-limit { margin-top: 6.5625rem; }
  }
}
</style>
